<template>
    <div>
        <!-- 用户 -->
        <div class="user_top" is-link >
            <img src="../images/3.jpg" alt="" width="70px">
            <h3 @click="showPopup" v-if="!token">点击登录</h3>
            <h3  v-if="token">{{userInfos.nickname?userInfos.nickname:nickname}}</h3>
            <van-icon name="arrow" v-if="!token" class="right_icon"/>
            <van-icon name="cross" v-if="token" class="right_icon" @click="outlogin()"/>
        </div>
        <!-- /用户 -->
        <!-- 功能 -->
            <van-grid :column-num="3" square>
                <van-grid-item icon="label-o" text="我的订单" class="fun" @click="fun()" />
                <van-grid-item icon="bill-o" text="优惠券" class="fun" @click="fun()" />
                <van-grid-item icon="goods-collect-o" text="礼品卡" class="fun" @click="fun()" />
                <van-grid-item icon="goods-collect-o" text="我的收藏" class="fun" @click="fun()" />
                <van-grid-item icon="flag-o" text="我的足迹" class="fun" @click="fun()" />
                <van-grid-item icon="contact" text="会员福利" class="fun" @click="fun()" />
                <van-grid-item icon="aim" text="地址管理" class="fun" @click="fun()" />
                <van-grid-item icon="warn-o" text="账号安全" class="fun" @click="fun()" />
                <van-grid-item icon="service-o" text="联系客服" class="fun" @click="fun()" />
                <van-grid-item icon="question-o" text="帮助中心" class="fun" @click="fun()" />
                <van-grid-item icon="smile-comment-o" text="意见反馈" class="fun" @click="fun()" />
                
            </van-grid>
        <!-- /功能 -->
        <!-- 注册 -->
            <van-popup v-model="show">
                <van-form @submit="onSubmit" class="reg">
                    <van-field
                        v-model="username"
                        name="用户名"
                        label="用户名"
                        placeholder="用户名"
                        :rules="[{ required: true, message: '请填写用户名' }]"
                    />
                    <van-field
                        v-model="password"
                        type="password"
                        name="密码"
                        label="密码"
                        placeholder="密码"
                        :rules="[{ required: true, message: '请填写密码' }]"
                    />
                    <div style="margin: 16px;">
                        <van-button round block type="danger" native-type="submit">登录/注册</van-button>
                    </div>
                </van-form>
            </van-popup>
        <!-- /注册 -->
    </div>
</template>

<script>
import {userMags} from "../request/my.js"
import {Toast} from 'vant' 
import { Dialog } from 'vant';
export default {
    name: 'Wjm0714My',

    data() {
        return {
            value:'',
            show: false,
            password:'',
            username:'',
            userInfos:{},
            token:'',
            nickname:''
        };
    },
    created(){
        this.active = this.$store.state.active;
        if (localStorage.getItem('token')) {
            this.nickname = localStorage.getItem('nickname');
        }
    },
    mounted() {
        this.token = localStorage.getItem('token');
    },

    methods: {
        fun(){
            Toast('该功能暂未开放');
        },
        // 登录
        onSubmit(values) {
            // 用户信息
            userMags({
                username:this.username,
                pwd:this.password
            })
            .then(res=>{
                this.userInfos = res.data.data.userInfo;
                localStorage.setItem('token',res.data.data.token);
                localStorage.setItem('nickname',res.data.data.userInfo.nickname);
                this.token = localStorage.getItem('token');
                this.show = false;
                this.$router.back()
            })
            .catch(err=>{
                console.log(err);
            })
        },
        // 展示登录框
        showPopup() {
            this.show = true;
        },
        // 退出登录
        outlogin(){
            Dialog.confirm({
            title: '退出登录',
            message: '您是否退出当前账号',
            })
            .then(() => {
                // on confirm
                localStorage.removeItem('token');
                localStorage.removeItem('username');
                location.reload();
            })
            .catch(() => {
                
            });
        }
    },
};
</script>

<style lang="less" scoped>
    // 用户信息
    .user_top{
        width: 100%;
        height: 1.1rem;
        background-color: #333;
        padding: 20px 10px;
        box-sizing: border-box;
        font-family: 黑体;
        display: flex;
        justify-content: space-between;
        img{
            border-radius: 50%;
        }
        h3{
            width: 70%;
            color: #fff;
            font-size: .14rem;
            line-height: .7rem;
        }
        .right_icon{
            line-height: .7rem;
            color: #fff;
        }
    }
    .reg{
        width: 90vw;
        margin: .3rem 0;
    }
</style>